<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>{% if goods.goods_name == '' %}派乐熊{% else %} {{goods.goods_name}} {%endif%}</title>
	<link rel="stylesheet" href="/static/product/css/ui_box.css" />
	<link rel="stylesheet" href="/static/product/css/plx_main.css" />
	<link rel="stylesheet" href="/static/product/css/swiper-3.4.2.min.css" />
	<link rel="stylesheet" href="/static/product/css/photoswipe.css" />
	<link rel="stylesheet" href="/static/product/css/default-skin.css" />
	
</head>

<body>
	<!--header-->
	<!--<header id="header" class="ub ub-ac ub-pc sc-bg1 border-b">
		<div class="arrow-left ub-img"></div>
		<p class="ulev1 text-color1 tx-c">商品详情</p>
		<img class="collection" src="/static/product/img/collection-gray.png" />
		<img class="share" src="/static/product/img/share.png" />
	</header>-->
	<!--内容部分-->
	<div id="content">
		<!--轮播图-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div id="vue">
			<div class="umar-a">
				<p class="details goods_name"></p>
				<!--商品详情-->
				<div class="ub">
        			<div class="ub ub-ver">
        				<p class="countdown"><span id="day">13</span>天<span id="hour">13</span>小时<span id="minute">03</span>分<span id="second">23</span>秒</p>
        				<p class="statistics">限量<span class="havenum"></span>/申请<span class="have_apply"></span>人</p>
        			</div>
        			<div class="cost">¥0</div>
        		</div>
			</div>
			<div class="dividingline"></div>
			<p class="description goods_desc"></p>
			<div style='display:none'  id='description'>{{goods.goods_desc}}</div>
			<div class="dividingline"></div>
			<div class="umar-a">
				<p class="storename store_name"></p>
				<div class="ub ub-ac address">
					<div>
						<img class="circle" src="/static/product/img/circle.png" />
					</div>
					<p class="ub-f1 store_address"></p>
					<span class="ub-f1 distance"></span>
				</div>
				<div class="ub ub-ac address">
					<div>
						<img class="phone" src="/static/product/img/phone.png" />
					</div>
					<a onclick='tel_store(this)' class="store_tel"></a>
				</div>
			</div>
			<div class="dividingline"></div>
		</div>

		<div class="ub ub-pc ub-ac tab" id="tab">
			<p class="on">体验详情</p>
			<p>购买须知</p>
			<p>商户介绍</p>
		</div>
		<div id="box" style="height:4rem;display: none;"></div>
		<!--活动详情-->
		<div id="xiangqing" style="display: none;">
			<div id="Details" class="umar-a detail">
				<!--<p>派乐熊儿童游泳体验馆致力于让孩子们，每天健康运动一小时，每周三次课，可多选参与，在学龄前，为孩子打下坚实的身体基础。全程专业教练指导陪护，为孩子提供安全的锻炼环境，男教练特有的教学方式，更加促进孩子的团结、坚韧品质。</p>-->
    			<!--<p>所有套系在拍摄条件允许下，均可拍摄指定外景1套（含在总套数内）。-->
<!--底片除赠送精修张数以外另需购买，儿童照／新生儿照：50元精修，60元入册；亲子照／孕妇照：70元精修，80元入册。<p />-->
				<!--<p>所有套系可拍全家福及合照，共可免费入册5-10张（含在总精修张数内），大人服装造型自备，限5人入境。所有产品中的照片均选自精修。<p />-->
				<!--<p>至少提前一周以上预约，约满顺延，不接受未经预约直接到店拍照。<p />-->
				<!--<p>新生儿宝宝7-15天拍摄为佳，限拍30天内宝宝。<p />-->
				<!--<p>孕妇照怀孕7-8个月拍摄为佳。<p />-->
				<!--<p>拍摄不满意可当场提出免费重拍。<p />-->
				<!--<p>自购买之日起7天内未拍摄可无理由退款。<p />-->
				<!--<p>拍摄过程默认同步录制花絮，顾客可选择性购买花絮及剪辑成品。<p />-->
				<!--<p>六环内产品免费物流。（通州店除外）<p />-->
				<!--<p>取件需知：自选片后30甜取件，如需配送另加3天左右，节假日顺延；VIP需要定稿的，自定稿后30甜取件，如需配送另加3天左右，节假日顺延；取件后有问题的需在24小时内提出，超过24小时视为无问题，资料将被系统自动清除，无法提供查询服务。<p />-->
				<!--<p>特别提示：顾客在接受整个服务过程中，出现任何问题均可拨打客服电话123456789进行投诉。</p>-->
				<!--<p style="height: 5rem;"></p>-->

			</div>
			
		</div>
	
		<!--购买须知-->
		<div id="xuzhi" style="display: none;">
			<p>有效期</p>
			<p class="yxq"></p>
			<p>使用时间</p>
			<p class="sysj"></p>
			<p>预约信息</p>
			<p class="yyxx"></p>
			<p>适用人数</p>
			<p class="syrs"></p>
			<p>温馨提示</p>
			<p class="wxts"></p>
			<div style="height:17rem;"></div>
		</div>
		<!--商户介绍-->
		<div id="shanghu" style="display: none;">
			<div class="ub ub-fh">
				<img class="logo store_img" src="" />
				<div class="ub-f1 ub ub-ver tiyan">
					<p class="store_name"></p>
					<!--<p>以游泳比赛、游泳水中运动、游泳培训的方式来提高社会各界人士对体育的热爱。</p>-->
				</div>
			</div>
			<div class="directions store_info">
				
			</div>
			<div style="height: 15rem;"></div>
		</div>
	</div>
	{% if show == true %}
	<footer id="pay">
		<p>立即申请</p>
	</footer>
	{% endif %}
</body>
<script type="text/javascript" src="/static/common/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/product/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript" src="/static/product/js/photoswipe-ui-default.min.js"></script>
<script type="text/javascript" src="/static/product/js/photoswipe.min.js"></script>
<script type="text/javascript" src="/static/common/js/jockey.min.js"></script>
<script type="text/javascript" src="/static/common/js/public.js"></script>
<script>
	var gid = {{gid}};
	var lat = {{lat}};
	var lon = {{lon}};
	(function () {
		// 接口
		var Api = {
			base: 'https://clubbear.clubbear.cn',
			riji: '/diary/GetLeftComment',
			rijiList: '/diary/GetRecomDiary',
			detail:'/goods/GetGoodsComment?gid='+gid+'&page=3&num=2'
		}

		//轮播图
		$(document).ready(function () {
			$("#xiangqing").show();
		});
		//从后台读取数据
		$.ajax({
			type: "post",
			url: "https://clubbear.clubbear.cn/experience/GetExpGoodsDetail?eid="+gid+"&longitude" + lon + "&latitude" + lat,
			dataType: "json",
			success: function (data) {
				console.log(data)
				var imgurl = data.data.img[0].imgurl;
				var goods_name = data.data.goods_name;
				var have_apply = data.data.have_apply;
				var havenum = data.data.havenum;
				var goods_desc = data.data.goods_desc;
				var goods_price = data.data.goods_price;
				var sale_price = data.data.sale_price;
				var store_address = data.data.store_address;
				var store_name = data.data.store_name;
				var store_img = data.data.store_img;
				var store_info = data.data.store_info;
				var store_tel = data.data.store_tel;
				var distance = data.data.distance;
				var introduce = data.data.introduce;
				var detail = data.data.detail;
				var yxq = data.data.xuzhi.yxq;
				var sysj = data.data.xuzhi.sysj;
				var yyxx = data.data.xuzhi.yyxx;
				var syrs = data.data.xuzhi.syrs;
				var wxts = data.data.xuzhi.wxts;
				var end_time = data.data.end_time;
				//如果不返回有效期，则有效期就不显示
				if(yxq==null || yxq=='' || yxq== undefined){
					$("#xuzhi p").eq(0).hide();
					$("#xuzhi p").eq(1).hide();
				}
				for (var i = 0; i < data.data.img.length; i++) {
					var html1 = '<div class="swiper-slide"><img class="banner" src="'
					var html2 = data.data.img[i]
					var html3 = '" /></div>'
					var html4 = html1 + html2 + html3
					$(".swiper-wrapper").append(html4)
				}
				

				var mySwiper = new Swiper('.swiper-container', {
					direction: 'horizontal',
					autoplay: 3000,
					pagination: '.swiper-pagination',
					loop: true,
				});
				$(".goods_name").text(goods_name);
				$(".have_apply").text(have_apply);
				$(".havenum").text(havenum);
				$(".goods_desc").text(goods_desc);
				$(".goods_price").text(goods_price);
				$(".sale_price").text(sale_price);
				$(".store_address").text(store_address);
				$(".store_name").text(store_name);
				$(".store_img").attr("src",store_img);
				$(".store_info").html(store_info);
				$(".store_tel").text(store_tel);
				$(".distance").text(distance);
				$(".introduce").text(introduce);
				$(".detail").html(detail);
				$(".yxq").text(yxq);
				$(".sysj").text(sysj);
				$(".yyxx").text(yyxx);
				$(".syrs").text(syrs);
				$(".wxts").text(wxts);
				//$("#description").text(goods_desc);
				//体验详情倒计时代码
				var serverTime = end_time; //服务器时间，毫秒数 
				$(function(){ 
				  //var dateTime = new Date(); 
				  //var difference = serverTime - dateTime.getTime(); //客户端与服务器时间偏移量 
				  //console.log(difference)
				  setInterval(function(){ 
					var obj = $(this); 
					//var endTime = new Date("2017/10/1");
					//console.log(endTime)
					var nowTime = new Date();
					var nMS=parseInt(serverTime - (nowTime.getTime()/1000)); 
					//console.log(nMS)
					var myD=Math.floor(nMS/(60 * 60 * 24)); //天 
					var myH=Math.floor(nMS/(60*60)) % 24; //小时 
					var myM=Math.floor(nMS/60) % 60; //分钟 
					var myS=Math.floor(nMS) % 60; //秒 
					var myMS=Math.floor(nMS/100) % 10; //拆分秒 
					if(myD>= 0){ 
					  $("#day").text(myD)
					  $("#hour").text(myH)
					  $("#minute").text(myM)
					  $("#second").text(myS)
					}else{ 
					  $("#day").text(0)
					  $("#hour").text(0)
					  $("#minute").text(0)
					  $("#second").text(0)
					} 
				  }, 1000); //每个1秒执行一次 
				});
				
				var oDiv = document.getElementById('tab');
				var divT = oDiv.offsetTop;
				window.onscroll = function () {
					var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
					console.log(divT)
					console.log(scrollT)
					if (scrollT >= divT) {
						$("#tab").addClass("fixed");
						$(".tab p").css("margin-top", "0rem");
						$(".tab p").click(function () {
							var index = $(this).index();
							$(this).addClass("on").siblings().removeClass("on");
							if (index == 0) {
								$("#xiangqing").show();
								$("#xuzhi").hide();
								$("#shanghu").hide();
								$("#box").show();
						    	var box = document.getElementById("box").scrollIntoView(true);
							} else if (index == 1) {
								$("#xuzhi").show();
								$("#xiangqing").hide();
								$("#shanghu").hide();
								$("#box").show();
						    	var box = document.getElementById("box").scrollIntoView(true);
							} else if (index == 2) {
								$("#shanghu").show();
								$("#xuzhi").hide();
								$("#xiangqing").hide();
								$("#box").show();
						    	var box = document.getElementById("box").scrollIntoView(true);
							} else {
				
							}
						});
	
					} else {
						$("#tab").removeClass("fixed");
						$(".tab p").css("margin-top", "1.2rem")
						$("#box").hide()
					}
				}
				
			}
		});

		//tab栏切换
		$(".tab p").click(function () {
			var index = $(this).index();
			$(this).addClass("on").siblings().removeClass("on");
			if (index == 0) {
				$("#xiangqing").show();
				$("#xuzhi").hide();
				$("#shanghu").hide();
			} else if (index == 1) {
				$("#xuzhi").show();
				$("#xiangqing").hide();
				$("#shanghu").hide();
			} else if (index == 2) {
				$("#shanghu").show();
				$("#xuzhi").hide();
				$("#xiangqing").hide();
			} else {

			}
		});
		
		
		//吸顶效果
		window.onload = function () {
			var oDiv = document.getElementById('tab');
			var divT = oDiv.offsetTop+170;
			window.onscroll = function () {
				var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
				if (scrollT > divT) {
					$("#tab").addClass("fixed");
					$(".tab p").css("margin-top", "0rem");
					$(".tab p").click(function () {
						var index = $(this).index();
						$(this).addClass("on").siblings().removeClass("on");
						if (index == 0) {
							$("#xiangqing").show();
							$("#xuzhi").hide();
							$("#shanghu").hide();
							$("#box").show();
					    	var box = document.getElementById("box").scrollIntoView(true);
						} else if (index == 1) {
							$("#xuzhi").show();
							$("#xiangqing").hide();
							$("#shanghu").hide();
							$("#box").show();
					    	var box = document.getElementById("box").scrollIntoView(true);
						} else if (index == 2) {
							$("#shanghu").show();
							$("#xuzhi").hide();
							$("#xiangqing").hide();
							$("#box").show();
					    	var box = document.getElementById("box").scrollIntoView(true);
						} else {
			
						}
					});

				} else {
					$("#tab").removeClass("fixed");
					$(".tab p").css("margin-top", "1.2rem")
					$("#box").hide()
				}
			}
		}
	})()
</script>
<script>
	$('#pay').on('click',function(){
		if( PUBCOMMON.browserEnv.isInWeixin() ){
			if( PUBCOMMON.browserEnv.isInAndroid() ){
			
				window.location.href = 'http://app.mi.com/details?id=com.clubbear.paile&ref=search';
			}else{
				window.location.href = 'https://itunes.apple.com/gb/app/pai-le-xiong/id1294951586?mt=8';
			}
		}else{
			Jockey.send("pailexiong", {key: 'apply', data: gid });
		}
		 
	})
	function tel_store(obj){
        Jockey.send("pailexiong", {key: 'phone', data: $(obj).text()});
    }     	
</script>

</html>
